<script setup lang="ts">
import { NTabs, NTab } from "naive-ui";
import { useI18n } from "vue-i18n";
import { useRouteTabStore } from ".";

const store = useRouteTabStore();

const closeHandler = (name: string) => {
  store.removeTabByName(name);
};

//@ts-ignore
const { t } = useI18n<{ messages: Record<string, any> }>();
</script>

<template>
  <NTabs
    v-model:value="store.current"
    type="card"
    size="small"
    @close="closeHandler"
  >
    <template #prefix>
      <div class="tw-w-4"></div>
    </template>

    <NTab
      v-for="tab in store.tabs"
      :key="tab.name"
      :closable="tab.closeable"
      :name="tab.name"
      >{{ t(`router.${tab.label}`) }}</NTab
    >

    <template #suffix>
      <div class="tw-w-4"></div>
    </template>
  </NTabs>
</template>

<style scoped></style>
